<template>
  <loading :active="isLoading" :is-full-page="true" :opacity="0.7">
    <slot name="default">
      <div class="d-flex flex-column align-items-center">
        <span class="h3"><i class="fas fa-spinner fa-spin text-secondary"></i></span>
        <span class="text-secondary">{{ loadingMsg }}</span>
      </div>
    </slot>
  </loading>
</template>

<script setup>
  import { useMainStore } from "stores";
  import { storeToRefs } from 'pinia';
  import Loading from 'vue-loading-overlay';
  import 'vue-loading-overlay/dist/vue-loading.css';

  const mainStore = useMainStore();
  const { isLoading, loadingMsg } = storeToRefs(mainStore);

</script>
